import React, {Component} from "react";
import {Card, Form, Modal} from "antd";
import {Link} from 'react-router'
import PropTypes from "prop-types";
import {BtnsTableV, EditFormNormal, SearchForm, TableContent} from "../../../widgets/index";
import {getOrganNo, HTTP} from "../../../utils";
import {erpOrderList} from "../../../utils/api";
import BreadcrumbCustom from "../../../components/BreadcrumbCustom";

const FormItem = Form.Item;

export default class extends Component {

    static contextTypes = {
        router: PropTypes.object
    }

    constructor(props) {
        super(props);
        this.table = undefined

        this.state = {
            formVisible: false,
            formReadOnly: false,
            formInitData: {}
        }
    }

    seaFields = [{
        label: '商品名称',
        key: 'name'
    }]

    seaBtns = []

    columns = [{
        title: '订单号',
        dataIndex: 'orderNum',
        key: 'orderNum',
    }, {
        title: '第三方订单号',
        dataIndex: 'thirdOrderNum',
        key: 'thirdOrderNum'
    }, {
        title: '用户号',
        dataIndex: 'userNo',
        key: 'userNo'
    },{
        title: '用户名',
        dataIndex: 'userName',
        key: 'userName'
    },{
        title: '商品名称',
        dataIndex: 'goods',
        key: 'goods'
    },{
        title: '金额',
        dataIndex: 'totalFeeY',
        key: 'totalFeeY'
    },{
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <BtnsTableV onView={this.invokeView.bind(this, record)} />
        ),
    }]

    editFields = [{
        label: '商品名称',
        key: 'name',
        required: true,
        requiredMsg: '商品名称必填'
    }, {
        label: '商品价格',
        key: 'price',
        type: 'number',
    }, {
        label: '商品描述',
        key: 'goodsDesc',
        type: 'textarea'
    }]

    render() {
        return (
            <div>
                <BreadcrumbCustom first="商品管理" second={(<Link to={'/app/erp/product/manager'}>商品列表</Link>)} />
                <Card title="商品列表" bordered={false}>
                    <SearchForm fields={this.seaFields} btns={this.seaBtns} onSearch={this.onSearch}/>
                    <TableContent
                        ref={(e) => {this.table = e}}
                        columns={this.columns}
                        url = {erpOrderList}
                        searchParam={this.state.searchParam}
                    />
                </Card>
                {
                    this.state.formVisible && (
                        <EditFormNormal
                            initData={this.state.formInitData}
                            fields={this.editFields}
                            onClose={() => this.hideForm()}
                            readOnly={this.state.formReadOnly}
                            onSave={() => {}}
                        />
                    )
                }
            </div>
        )
    }

    onSearch = (values) => {
        this.setState({
            searchParam: Object.assign({}, this.state.searchParam, values)
        }, () => {
            this.table.loadData()
        })
    }


    invokeView = (record) => {
        this.setState({
            formReadOnly: true
        }, () => {
            this.showForm(record)
        })
    }

    showForm = (d) => {
        this.setState({
            formVisible: true,
            formInitData: d || {}
        })
    }

    hideForm = () => {
        this.setState({
            formVisible: false,
            formInitData: {}
        })
    }

    hideFormSuccess = () => {
        this.setState({
            formVisible: false,
            formInitData: {}
        }, () => {
            this.table.loadData()
        })
    }
}
